<template>
	<div class="container">
		<div class="mod">
			<div class="wrapperInner">
				<div class="header">
					<span :class="mode === 0 ? 'title' : 'caption'" @click="mode = 0">登录</span>
					<span :class="mode === 1 ? 'title' : 'caption'" @click="mode = 1">注册</span>
				</div>
				<div class="line"></div>
				<van-form @submit="onSubmit">
					<van-cell-group inset>
						<van-field
							v-if="mode == 1"
							v-model="uname"
							name="uname"
							label="昵称"
							placeholder="昵称"
							:rules="[{ required: true, message: '请填写昵称' }]"
						/>
						<van-field
							v-model="uaccount"
							name="uaccount"
							label="账号"
							placeholder="账号"
							:rules="[{ required: true, message: '请填写账号' }]"
						/>
						<van-field
							v-model="upassword"
							type="password"
							name="upassword"
							label="密码"
							placeholder="密码"
							:rules="[{ required: true, message: '请填写密码' }]"
						/>
					</van-cell-group>
					<div style="margin: 16px;">
						<van-button round block color="linear-gradient(to right, #ff6034, #ee0a24)" native-type="submit">
							{{ mode === 0 ? '登录' : '注册' }}
						</van-button>
					</div>
				</van-form>
				<div class="footer">
					<div class="empty" />
					<div class="view">
						<div class="horizontalLine" />
						<span class="caption4">校园闲置二手平台</span>
					</div>
					<div class="view1"><div class="horizontalLine1" /></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { reactive, toRefs, onMounted, computed, getCurrentInstance, watch, defineEmits, ref } from 'vue';
import { Login, GetInfo, ShowWallet, Register } from '@s/user';
const { proxy } = getCurrentInstance();
const data = reactive({
	uaccount,
	upassword,
	uname,
	mode: 0,
});
const { uaccount, upassword, uname, mode } = toRefs(data);
const emit = defineEmits(['isBar','loading']);
onMounted(() => {
	emit('isBar');
		emit('loading');
});
const onSubmit = async (values) => {
	values.upassword = proxy.$md5(values.upassword);
	console.log('密码',values.upassword);
	if (data.mode == 0) {
		let params = {
			...values,
			type: 2,
		};
		let res = await Login(params);
		if (res.code != 404 && res.code != 500) {
			proxy.$toast.success('登陆成功');
			proxy.$store.commit('user/token', res.token);
			let res2 = await GetInfo();
			let res3 = await ShowWallet({ uname: res2.data.loginUser.uname });
			let userInfo = {
				...res2.data.loginUser,
				...res3.data,
			};
			proxy.$store.commit('user/userInfo', userInfo);
			proxy.$store.commit('user/isLogin', true);
			proxy.$router.push('/index');
		}
	} else {
		let params = {
			...values,
			role: 2,
		};
		let res = await Register(params);
		proxy.$toast.success(`注册成功，赶紧登陆吧`);
		data.mode = 0;
	}
};
const toLogin = () => {
	console.log(proxy.$md5('123456'));
};
</script>

<style lang="scss" scoped>
.van-cell-group {
	margin-top: 30px;
}
.line {
	margin-top: 20px;
	width: 100%;
	height: 1px;
	background-color: #bfbfbf;
}
.container {
	display: flex;
	background-color: whitesmoke;
	justify-content: center;
	align-items: center;
	height: 100vh;
}
.mod .wrapperInner {
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	border-radius: 7px;
	background-color: #ffffff;
	box-shadow: 0.5px 0 16px rgba(87.9986572265625, 105.002288818359, 255, 0.1);
	width: 321px;
}
.mod .header {
	display: flex;
	position: relative;
	align-items: flex-end;
	flex-direction: row;
	height: 20px;
	margin-top: 29.5px;
	margin-left: 35px;
}
.mod .title {
	margin-right: 19px;
	text-align: center;
	text-decoration: none;
	line-height: 20px;
	letter-spacing: 0;
	color: #333333;
	font-size: 20px;
	transition: all 0.2s;
}
.mod .caption {
	transition: all 0.2s;
	margin-right: 19px;
	text-align: center;
	text-decoration: none;
	line-height: 14px;
	letter-spacing: 0;
	color: #bfbfbf;
	font-size: 14px;
}

.mod .submain {
	display: flex;
}

.mod .caption3 {
	text-align: center;
	text-decoration: none;
	letter-spacing: 0;
	color: #666666;
	font-size: 13px;
	margin-left: 70%;
}

.mod .main {
	box-sizing: border-box;
	display: flex;
	position: relative;
	align-items: center;
	align-self: center;
	flex-direction: row;
	margin-top: 30.5px;
	border-radius: 20.75px;
	background-color: rgba(170, 170, 170, 0.95);
	background-image: linear-gradient(to left, rgb(242, 75, 12), rgb(242, 21, 12));
	padding-right: 104.5px;
	padding-left: 104px;
	height: 41.5px;
	overflow: hidden;
	line-height: 16px;
}
.mod .title4 {
	margin-top: 0.5px;
	text-align: center;
	text-decoration: none;
	letter-spacing: 0;
	color: #ffffff;
	font-size: 16px;
}
.mod .footer {
	display: flex;
	position: relative;
	align-items: center;
	align-self: center;
	flex-direction: row;
	margin-top: 10px;
	margin-bottom: 30px;
	white-space: normal;
}
.mod .empty {
	margin-right: 64.5px;
	width: 0;
	height: 14.5px;
}
.mod .view {
	display: flex;
	align-items: center;
	flex-direction: row;
	margin-right: 64.5px;
	width: 102px;
	height: 14.5px;
}
.mod .horizontalLine {
	margin-right: 13px;
	margin-left: -64.5px;
	background-color: rgba(191, 191, 191, 0.95);
	width: 64.5px;
	height: 1.5px;
	overflow: hidden;
}
.mod .caption4 {
	text-decoration: none;
	line-height: 15px;
	letter-spacing: 0;
	white-space: nowrap;
	color: #bfbfbf;
	font-size: 15px;
}
.mod .view1 {
	display: flex;
	align-items: center;
	flex-direction: row;
	width: 0;
	height: 14.5px;
}
.mod .horizontalLine1 {
	margin-left: -64.5px;
	background-color: rgba(191, 191, 191, 0.95);
	width: 64.5px;
	height: 1.5px;
	overflow: hidden;
}
</style>
